<template>
	<view class="box">
		<u-navbar
					back-icon-color='#333333' 
					:border-bottom="false" 
					title-color="#333333" 
					title="合伙人攻略" 
					title-size="32"
					:title-bold='true'
					
				>
		</u-navbar>
		
		<!-- 头部 -->
		<view class="header">
			<image style="width: 100%;" src="https://files.yzsheng.com/client/commodity/haibaow.jpg" mode="widthFix"></image>
		</view>
		
		<!-- 内容 -->
		<view class="content">
			
			<!-- 卡片 -->
			<view class="content-card">
				
				<!-- 标题 -->
				<view class="title">开始赚钱&得福利</view>
				
				<!-- 邀请 -->
				<view class="invitation">
					<view class="flex flex-ai-c top">
						<view class="invitation-icon flex flex-jc-c flex-ai-c"><i-icon icon="iconyaoqing1" color="#fff" size="50rpx"></i-icon></view>
						<view class="invitation-title">
							<view class="flex flex-jc-sb">
								<view class="invitation-on">邀请好友获权</view>
								<view class="invitation-go" @click="goPage(1)">去邀请</view>
							</view>
							<view style="color: #666666;font-size: 28rpx;">成功邀请好友25人及以上</view>
						</view>
					</view>
				</view>
				
				<!-- 购车获权 -->
				<view class="invitation">	
					<view class="flex flex-ai-c top">
						<view class="invitation-icon2 flex flex-jc-c flex-ai-c"><i-icon icon="iconxuanche" color="#fff" size="60rpx"></i-icon></view>
						<view class="invitation-title">
							<view class="flex flex-jc-sb">
								<view class="invitation-on">购车获权</view>
								<view class="invitation-go" @click="goPage(2)">去购车</view>
							</view>
							<view style="color: #666666;font-size: 28rpx;">通过7迈车购车用户，成为合伙人</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 尾部 -->
		<view class="footer">
			<view class="footer-title">合伙人攻略说明</view>
			
			<!-- 问题 -->
			<view class="footer-problem">Q：什么是77合伙人？</view>
			
			<!-- 答案 -->
			<view class="footer-answer">
				<view>A：77合伙人是7迈车旗下用户共享平台，旨在为您和您</view>
				<view>的好友提供买车、用车的优惠福利</view>
			</view>
			<view class="footer-problem">Q：如何成为合伙人</view>
			<view class="footer-answer">A：7迈车注册用户</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods:{
			goPage(num){
				if(num===1){
					uni.redirectTo({
						url:'/pages_common/pages_me/partner/partner'
					})
				}else if(num===2){
					uni.switchTab({
						url:'/pages/index/index'
					})
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box{
		background-color: #EEEEEE;
		height: 100%;
		padding-bottom: 150rpx;
	}
	
	.u-slot-wrap{
		padding: 0 24rpx;
		flex:1;
		
	}
	.header{
		// height: 747rpx;
	}
	
	.content{
		
		//卡片
		&-card{
			width: 702rpx;
			height: 494rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.1);
			border-radius: 10rpx;
			margin: 30rpx auto;
			padding:24rpx;
			
			.title{
				font-size: 40rpx;
				font-weight: bold;
				color: #333333;
				line-height: 80rpx;
			}
			
			// 邀请
			.invitation{
				width: 643rpx;
				height: 156rpx;
				background: #FFFFFF;
				box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.1);
				border-radius: 10rpx;
				padding: 23rpx;
				line-height: 58rpx;
				margin-top: 20rpx;
				
				//标题
				&-title{
					margin-left: 20rpx;
					flex:1;
					font-size: 32rpx;
					font-weight: 500;
					color: #333333;
				}
				
				//去邀请
				&-go{
					width: 150rpx;
					height: 50rpx;
					background: linear-gradient(0deg, #FBD220, #FFE23E);
					border-radius: 25rpx;
					line-height: 50rpx;
					text-align: center;
					font-size: 26rpx;
					font-weight: 500;
					color: #333333;
				}
				
				//获权
				&-on{
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
				}
				
				&-icon{
					width: 100rpx;
					height: 100rpx;
					background: linear-gradient(0deg, #F55B8E, #FCA574);
					border-radius: 50%;
				}
				&-icon2{
					width: 100rpx;
					height: 100rpx;
					background: linear-gradient(0deg, #3E9BF2, #80ECFF);
					border-radius: 50%;
				
				}
			}
		}
	
	}

	.footer{
		width: 702rpx;
		height: 430rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.1);
		border-radius: 10rpx;
		margin: 0 auto;
		padding: 23rpx;
		
		// 合伙人攻略
		&-title{
			font-size: 40rpx;
			font-weight: bold;
			color: #333333;
		}
		
		// 问题
		&-problem{
			font-size: 26rpx;
			font-weight: bold;
			color: #333333;
			margin: 30rpx 0;
		}
		// 答案
		&-answer{
			font-size: 26rpx;
			font-weight: 500;
			color: #666666;
		}
	}
</style>
